<template>
  <div>
    <uv-popup bgColor="none" zIndex="13" ref="popup1" mode="bottom" :closeOnClickOverlay="false">
      <div class="p1755651982 " :style="{ height: `calc(100vh - ${statusBarHeight}px)` }">
        <div v-if="statusBarWidth > 0" style="height: 60px;"></div>
        <div class="fac p1755240112 pl13 bfff">
          <div class="mr20" @click="closeCityTap">
            <uv-icon color="rgb(48, 49, 51)" size="20px" name="close"></uv-icon>
          </div>
          <div class="p1755594025">
            <uv-input class="fz32" v-model.trim="short_name" placeholder="城市中文名字或拼音" prefixIcon="search"
              prefixIconStyle="color: #909399"></uv-input>
          </div>
          <div @click="_listsOfCities" class="fz32" style="color: #979898;">&nbsp;&nbsp;搜索</div>
        </div>
        <div style="background-color: #fff;">
          <div class="fac p1755651503">
            <uv-icon size="38rpx" color="#F0AE2D" name="map"></uv-icon>
            <div class="fz32">&nbsp;{{cityName}}&nbsp;</div>
            <div style="color: #C1C2C2" class="fz28">当前定位城市</div>
          </div>
          <uv-index-list v-if="indexList.length" activeColor="#F0AE2D" :index-list="indexList" customNavHeight="100rpx">
            <uv-index-item v-for="(item, index) in itemArr" :key="'itemArr-' + index">
              <uv-index-anchor :key="'itemArr-1-' + index" size="34rpx" bgColor="#F7F5F8"
                :text="indexList[index]"></uv-index-anchor>
              <div @click="cityNameTap(cell)" class="p1755651323 fz32" :key="'item-' + index"
                v-for="(cell, index) in item">
                {{cell.short_name}}
              </div>
            </uv-index-item>
          </uv-index-list>
        </div>
      </div>
    </uv-popup>
    <uv-popup zIndex="12" ref="popup" mode="bottom" :closeOnClickOverlay="false">
      <div :style="{ height: `calc(100vh - ${statusBarHeight || 0}px)` }">
        <uv-navbar title="选择地址" border bgColor="rgba(255, 255, 255, 0)" @leftClick="closeTap" placeholder
          leftIcon="close" imgMode="widthFix"></uv-navbar>
        <div class="fac p1755240112 pl13">
          <div @click="cityTap" class="fac fz32">{{shortCityName}}&nbsp;
            <uv-icon name="arrow-down"></uv-icon>&nbsp;&nbsp;
          </div>
          <div class="p1755594025">
            <uv-input class="fz32" v-model.trim="form.keywords" placeholder="点击搜索地址" prefixIcon="search"
              prefixIconStyle="color: #909399"></uv-input>
          </div>

          <div @click="searchTap" class="fz32" style="color: #979898;">&nbsp;&nbsp;搜索</div>
        </div>
        <scroll-view scroll-y scroll-top="0" @scrolltolower="onReachBottom" class="scroll-vertical">
          <div @click="chooseTap(item)" class="list" v-for="(item, index) in tableData" :key="'tableData-' + index">
            <div style="width: 95%">
              <div class="title1 fz34 single-line">{{item.title}}</div>
              <div class="desc  fz28 single-line">{{item.distance}}&nbsp;&nbsp;&nbsp;{{item.address}}</div>
            </div>
            <uv-icon color="rgb(201, 202, 202)" name="arrow-right"></uv-icon>
          </div>
        </scroll-view>
      </div>
    </uv-popup>
  </div>

</template>
<script>
  import { getNearbyPlaces, listsOfCities } from '@/api'

  export default {
    data() {
      return {
        itemArr: [],
        indexList: [],
        statusBarHeight: 0,
        statusBarWidth: 0,
        titleBarHeight: 0,
        cityName: '泰州市',
        shortCityName: '泰州市',
        tableData: [],
        total: 0,
        showPopup: false,
        short_name: '',
        form: {
          page: 1,
          limit: 20,
          lat: 32.455778,
          lng: 119.923116,
          keywords: ''
        },
      }
    },
    watch: {
      showPopup: {
        handler(value) {
          this._menuButtonInfo()
          if (value) {
            this.open()
          }
        },
        deep: true,
        immediate: true
      }
    },
    onLoad() {
      this._menuButtonInfo()
    },
    methods: {
      cityNameTap(item) {
        console.log(item)
        this.$set(this.form, 'lat', item.lat)
        this.$set(this.form, 'lng', item.lng)
        this.shortCityName = item.short_name
        this.tableData = []
        this.total = 0
        this._getNearbyPlaces()
        this.$refs.popup1.close();
      },
      _listsOfCities() {
        this.indexList = []
        this.itemArr = []
        listsOfCities({ short_name: this.short_name }).then(res => {
          if (res.code === 200) {

            if (res.result && Object.keys(res.result).length) {
              this.indexList = Object.keys(res.result)
              this.itemArr = Object.values(res.result)
            }

          }
        })
      },
      _menuButtonInfo() {
        let menuButtonInfo = 0
        uni.getSystemInfo({
          success: (res) => {
            try {
              this.statusBarHeight = res.statusBarHeight
              menuButtonInfo = uni.getMenuButtonBoundingClientRect()
              this.statusBarWidth = menuButtonInfo.width
              this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
            } catch (error) {

            }
          }
        });
      },
      closeCityTap() {
        this.$refs.popup1.close();
        this.short_name = ''
      },
      cityTap() {
        this._listsOfCities()
        this.$refs.popup1.open();
      },
      open() {
        this.$nextTick(() => {
          this.$refs.popup.open();
          if (this.tableData.length === 0) {
            this._getNearbyPlaces()
          }
        })
      },
      searchTap() {
        this.$set(this.form, 'page', 1)
        this.$set(this.form, 'limit', 20)
        this.tableData = []
        this._getNearbyPlaces()

      },
      closeTap() {
        this.$nextTick(() => {
          this.$refs.popup.close();
        })
      },
      chooseTap(item) {
        this.$emit('choose', item)
        this.$refs.popup.close();
      },
      onReachBottom() {
        if (this.total > this.tableData.length) {
          let page = this.form.page
          this.$set(this.form, 'page', page + 1)
          this._getNearbyPlaces()
        }
      },
      _getNearbyPlaces() {
        uni.hideLoading()
        uni.showLoading({ title: '加载中', mask: true })
        getNearbyPlaces(this.form).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.hideLoading()
            this.total = res.result.total
            this.tableData = this.tableData.concat(res.result.data)
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .p1755669463 {
    margin-left: 100rpx;
    margin-right: 30rpx;
  }

  .p1755651503 {
    padding: 20rpx 0 20rpx 30rpx;
  }

  .p1755652766 {
    width: 100rpx;
  }

  .p1755651982 {
    background-color: #F7F5F8;
  }

  .p1755652155 {
    padding: 30rpx 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .p1755651323 {
    border-bottom: 2rpx solid #EFF0F0;
    padding: 20rpx 0 20rpx 0;
    margin-left: 30rpx;
    margin-right: 40rpx;
  }

  .p1755651323:last-child {
    border: none;
  }


  .p1755240112 {
    padding: 30rpx 30rpx 30rpx 13px;
    border-bottom: 2rpx solid #eeeeee;
  }

  .scroll-vertical {
    height: 100vh;
  }

  .title1 {
    font-size: 28rpx;
    color: #333333;
    padding-right: 20rpx;
    width: 95%;
  }

  .desc {
    color: #ADADAE;
    padding-right: 20rpx;
    padding-top: 10rpx;
    width: 95%;
    box-sizing: border-box;
  }

  .list {
    padding-left: 13px;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }
</style>